<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>01_元素内容操作</title>
		<script src="../js/jquery-1.11.1.js"></script>
		<!-- 01_元素内容操作：操作元素和元素内容的方式
		 html()			无参 ---功能：获取匹配元素集合中第一个元素
						有参 ---功能：获取匹配元素集合中所有元素并替换
		 特点：添加元素+内容
		 val()			无参 ---功能：针对表单元素：input select...
									 获取第一个表单元素的值【value】
						有参 ---功能：针对表单元素：input select...
									 设置表单元素的值，input直接设置
													 select不能直接设置，设置原有value值
		 特点：表单元素+内容、下拉列表只能添加存在value值
		 text()			无参 ---获取匹配元素集合中所有元素的文本内容
						有参 ---【设置】获取匹配元素集合中所有元素的文本内容做替换
		特点：添加内容
		 -->
	</head>
	<body>
		<h1>html()函数的使用</h1>
		<button>html()函数 有参</button>
		<span>lorem1</span>
		<span>lorem2</span>
		<h1>val()函数的使用</h1>
		<button>val()函数 无参</button>
		<input type="text" value="文本框真实数据">
		<input type="text" placeholder="文本框提示">
		<button class="btn2">val()函数【select】无参</button>
		<button class="btn3">val()函数【select】有参</button>
		<select >
			<!-- option包裹用户显示数据、option属性value真实的数据 -->
			<option value="rem1">lorem1</option>
			<option value="rem2">lorem2</option>
			<option value="rem3">lorem3</option>
		</select>
		
		<!-- html：按钮 .btn2  select>option*3
			jq：点击按钮，显示第一个表单元素的值
		 -->
		<h1>text()函数使用：包裹内容：文本</h1>
		<button class="btn4">text()函数 无参</button>
		<button class="btn5">text()函数 有参</button>
		<p>lorem4</p>
		<p>lorem5</p>
		<p>lorem6</p>
		<script>
			$(".btn5").click(function(){
			 $("p").text("改变效果");
			});
			
			
			
			/* $(".btn3").click(function(){
				/* 下拉列表  抓select元素 */
				//var vals=$("select").val('rem1');
				//抓取打印select的js对象。默认字符串形式表示[object Object]
				//抓取select的JS对象，调用对象toString()方法，如果没有重写[object Object]
				//设置  第一个option 的value值
				/*$("select").val('rem1');
				var vals=$("select").val();
				alert("val()函数针对下拉列表："+vals);
			}); 
			 */
			/* $(".btn2").click(function(){
				var vals=$("select").val();
				alert("val()函数针对下拉列表："+vals);
			}); */
			
			/* $("button").click(function(){
				/* 变量名不允许使用关键字   js种关键字 for  in  遍历数组 */
			/*var val=$("input").val();
			alert("val()函数针对input的无参形态"+val)
			}); */
			
			
			
			
			//按钮，点击按钮，实现span内容 改成 lorem lorem
			/* $("button").click(function(){
				$("span").html("<marquee>lorem</marquee>");
			}); */
			
			/* 变量		js变量--jq
			 int i=1;   Java写法  强类型语言
			 var i=数值、元素;JavaScript 弱类型语言
			 */
			/* var html=$("span").html();
			alert("html()参数的无参值："+html);
			 */
			
		</script>
	</body>
</html>